{{define "/user/register.shtml"}}
<!DOCTYPE html>
<html>

<head>
    {{template "/chat/head.shtml"}}
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">注册账号</h1>
    </header>
    <div class="mui-content" id="pageapp">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell mui-media">
                <a class="mui-navigate-right">
                    <input style="width: 100%;height: 48px;position: absolute;opacity:0;" onchange="uploadthis(this)"
                        accept="image/png,image/jpeg" type="file" class="mui-input-clear mui-input"
                        placeholder="请输入群名称">

                    <img id="head-img" :src="user.avatar" style="border-radius:50%;"
                        class="mui-media-object mui-pull-right head-img">
                    <div class="mui-media-body">
                        头像
                        <p class="mui-ellipsis">点击右侧上传头像</p>
                    </div>
                </a>
            </li>
        </ul>
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>手机</label>
                <input v-model="user.mobile" type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
            </div>

            <div class="mui-input-row">
                <label>密码</label>
                <input v-model="user.passwd" id='password' type="password" class="mui-input-clear mui-input"
                    placeholder="请输入密码">
            </div>
            <div class="mui-input-row">
                <label>确认</label>
                <input v-model="user.passwdr" id='password_confirm' type="password" class="mui-input-clear mui-input"
                    placeholder="请确认密码">
            </div>
            <div class="mui-input-row">
                <label>昵称</label>
                <input v-model="user.nickname" type="text" class="mui-input-clear mui-input" placeholder="请输入昵称">
            </div>
            <div class="mui-input-row">
                <label>性别</label>
                <select v-model="user.sex" class="mui-input-clear mui-input">
                    <option value="M">男</option>
                    <option value="W">女</option>
                </select>
            </div>
            <div class="mui-input-row">
                <label>介绍</label>
                <input v-model="user.memo" type="text" class="mui-input-clear mui-input" placeholder="简单描述一下你自己">
            </div>

        </form>
        <div class="mui-content-padded">
            <button @click="register" id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
        </div>
    </div>
</body>

</html>
<script>
    function uploadthis(dom) {
        var data = new FormData();

        for (let file of dom.files) {
            data.append('file', file);
        }

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {

                var res = JSON.parse(xhr.responseText);
                if (res.code != 0) {
                    mui.toast(res.msg)
                } else {
                    app.user.avatar = res.data;
                    mui.toast("上传成功")
                }

            }
        };
        xhr.open('POST', '/attach/upload');
        xhr.send(data)
    }
    var app = new Vue(
        {
            el: "#pageapp",
            data: {
                user: {
                    mobile: "",
                    passwd: "",
                    passwdr: "",
                    memo: "",
                    avatar: "/asset/images/user.jpg",
                    sex: ""
                },
            },
            methods: {
                register: function () {
                    var that = this;
                    if (!(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.user.mobile))) {
                        mui.toast("手机号格式不对")
                        return
                    }
                    if (!this.user.passwd) {
                        mui.toast("请输入密码")
                        return
                    }
                    if (this.user.passwd != this.user.passwdr) {
                        mui.toast("前后输入不一致")
                        return
                    }
                    post("user/register", this.user, function (res) {
                        if (res.code != 0) {
                            mui.toast(res.msg)
                        } else {
                            userInfo(res.data)
                            userId(res.data.id)
                            location.href = "../user/login.shtml"
                        }
                    })
                },
            }
        }
    )
</script>
{{end}}